<template>
  <div class="user-manual-select-selector">
    <UserManualSelectSelectorItem
        v-model:visibleModal="visibleModal" :item="item"
        v-for="item in userManualSelect?.select || []"
        v-model:selectedNode="selectedNode"/>

    <UserManualSelectSelectorPopup
        v-model:selectedNode="selectedNode"
        v-model:visible="visibleModal"/>
  </div>
</template>
<script setup>
import {createProps} from '@/utils';
import UserManualSelectSelectorItem from '@comp/UserManualSelect/UserManualSelectSelectorItem.vue';
import {nextTick, onMounted, ref, shallowRef, watch} from 'vue';
import UserManualSelectSelectorPopup from '@comp/UserManualSelect/UserManualSelectSelectorPopup.vue';

defineOptions({name: 'UserManualSelectSelector'});
const emits = defineEmits(['change'])
const props = defineProps({
  userManualSelect: createProps(Object, () => ({})),
  nodeSelectMap: createProps(Object, () => ({})),
});

const visibleModal = shallowRef(false);
const selectedNode = ref({});

watch(() => visibleModal.value, () => {
  nextTick(() => {
    emits('change')
  })
}, {immediate: true});

onMounted(() => {
  loadFlowUserTaskType();
});

function loadFlowUserTaskType() {

}
</script>
<style lang="less">
.user-manual-select-selector {
  background: #f4f4f4;
  height: 100%;
  padding-top: 0.2em;
}

.user-manual-select-selector .user-manual-select-selector-item {
  margin-bottom: 10px;
}
</style>